<template>
  <div class="my-order">
    <h1 class="my-order-title">我的订单</h1>
    <div class="tabs">
      <t-tabs type="card" default-value="all" @change="getOrders">
        <t-tab-panel value="all" label="全部订单">
          <div class="orders">
            <OrderCard
              v-for="(item, index) in orderAllList"
              :key="index"
              v-bind="item"
              style="margin-top: 1rem"
              @show-account-info="showAccountInfo"
              @show-pay="showPay"
              @delete-order="deleteOrder"
              @two-buy="twoBuy"
            />
          </div>
          <t-pagination
            v-if="orderAllList.length > 0"
            :on-page-size-change="handlePageSizeChange"
            :on-current-change="handleCurrentChange"
            :current.sync="currentPage"
            :total="total"
            showPageNumber
            :pageSize.sync="pageSize"
            :showPageSize="false"
            showPreviousAndNextBtn
            totalContent
            style="margin-top: 2rem"
          />
        </t-tab-panel>
        <t-tab-panel value="un_pay" label="未支付">
          <div class="orders">
            <OrderCard
              v-for="(item, index) in orderUnPayList"
              :key="index"
              v-bind="item"
              style="margin-top: 1rem"
              @show-account-info="showAccountInfo"
              @show-pay="showPay"
              @delete-order="deleteOrder"
              @two-buy="twoBuy"
            />
          </div>
          <t-pagination
            v-if="orderUnPayList.length > 0"
            :on-page-size-change="handlePageSizeChangeAPaid"
            :on-current-change="handleCurrentChangePaid"
            :current.sync="currentPage"
            :total="total"
            showPageNumber
            :pageSize.sync="pageSize"
            :showPageSize="false"
            showPreviousAndNextBtn
            totalContent
            style="margin-top: 2rem"
          />
        </t-tab-panel>
        <t-tab-panel value="paid" label="已支付">
          <div class="orders">
            <OrderCard
              v-for="(item, index) in orderPaidList"
              :key="index"
              v-bind="item"
              style="margin-top: 1rem"
              @show-account-info="showAccountInfo"
              @show-pay="showPay"
              @delete-order="deleteOrder"
              @two-buy="twoBuy"
            />
          </div>
          <t-pagination
            v-if="orderPaidList.length > 0"
            :on-page-size-change="handlePageSizeChangeCanceled"
            :on-current-change="handleCurrentChangeCanceled"
            :current.sync="currentPage"
            :total="total"
            showPageNumber
            :pageSize.sync="pageSize"
            :showPageSize="false"
            showPreviousAndNextBtn
            totalContent
            style="margin-top: 2rem"
          />
        </t-tab-panel>

        <t-tab-panel value="delivered" label="已发货">
          <div class="orders">
            <OrderCard
              v-for="(item, index) in orderDeliveredList"
              :key="index"
              v-bind="item"
              style="margin-top: 1rem"
              @show-account-info="showAccountInfo"
              @show-pay="showPay"
              @delete-order="deleteOrder"
              @two-buy="twoBuy"
            />
          </div>
          <t-pagination
            v-if="orderDeliveredList.length > 0"
            :on-page-size-change="handlePageSizeChangeRefunded"
            :on-current-change="handleCurrentChangeRefunded"
            :current.sync="currentPage"
            :total="total"
            showPageNumber
            :pageSize.sync="pageSize"
            :showPageSize="false"
            showPreviousAndNextBtn
            totalContent
            style="margin-top: 2rem"
          />
        </t-tab-panel>
      </t-tabs>
    </div>
    <t-dialog
      v-model:visible="dialogVisible"
      :closeOnOverlayClick="false"
      :footer="false"
      theme="success"
      header="订单详情"
      :width="isMobilePhone ? '90%' : '600'"
    >
      <template v-slot:default>
        <div class="dialog-account-info">
          <div class="account-item" v-if="orderInfo.remainTime">
            <div class="item-label" style="color: red">剩余时间:</div>
            <div class="item-value copyable" style="color: red">
              {{ orderInfo.remainTime }}
              <t-popconfirm
                :visible="remainVisible"
                theme="default"
                content="如需原号续费，请联系客服,其他请重新购买,是否前往重新购买?"
                @visible-change="onVisibleChange"
                ><t-button class="renewal-btn" theme="danger">续费</t-button></t-popconfirm
              >
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.orderCode">
            <div class="item-label">订单编号:</div>
            <div class="item-value copyable" @click="copyToClipboard(orderInfo.orderCode)">
              {{ orderInfo.orderCode
              }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.subjectName">
            <div class="item-label">商品名称:</div>
            <div class="item-value copyable">
              {{ orderInfo.subjectName }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.description">
            <div class="item-label">商品详情:</div>
            <div class="item-value copyable">
              {{ orderInfo.description }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.price">
            <div class="item-label">价格:</div>
            <div class="item-value copyable">
              {{ orderInfo.price }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.payStatus">
            <div class="item-label">状态:</div>
            <div class="item-value copyable">
              {{ orderInfo.payStatus }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.payType">
            <div class="item-label">支付方式:</div>
            <div class="item-value copyable">
              {{ orderInfo.payType }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.createdTime">
            <div class="item-label">创建时间:</div>
            <div class="item-value copyable">
              {{ orderInfo.createdTime }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.payTime">
            <div class="item-label">支付时间:</div>
            <div class="item-value copyable">
              {{ orderInfo.payTime }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.expireTime">
            <div class="item-label">过期时间:</div>
            <div class="item-value copyable">
              {{ orderInfo.expireTime }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.refundTime">
            <div class="item-label">退款时间:</div>
            <div class="item-value copyable">
              {{ orderInfo.refundTime }}
            </div>
          </div>
          <div class="account-item" v-if="orderInfo.cancelTime">
            <div class="item-label">取消时间:</div>
            <div class="item-value copyable">
              {{ orderInfo.cancelTime }}
            </div>
          </div>
        </div>
        <div class="dialog-account-info" style="padding-top: 0">
          <h3 style="margin-bottom: 1rem">账号信息</h3>

          <div class="account-item" v-if="accountInfo.account">
            <div class="item-label">账号：</div>
            <div class="item-value copyable" @click="copyToClipboard(accountInfo.account)">
              {{ accountInfo.account }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="accountInfo.password">
            <div class="item-label">密码：</div>
            <div class="item-value copyable" @click="copyToClipboard(accountInfo.password)">
              {{ accountInfo.password }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="accountInfo.pinCode">
            <div class="item-label">车位锁：</div>
            <div class="item-value copyable" @click="copyToClipboard(accountInfo.pinCode)">
              {{ accountInfo.pinCode }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="accountInfo.pinNum">
            <div class="item-label">车位号码：</div>
            <div class="item-value copyable" @click="copyToClipboard(accountInfo.pinNum)">
              {{ accountInfo.pinNum }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="accountInfo.pinText">
            <div class="item-label">车位描述：</div>
            <div class="item-value copyable" @click="copyToClipboard(accountInfo.pinText)">
              {{ accountInfo.pinText }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
          <div class="account-item" v-if="accountInfo.remark">
            <div class="item-label">备注：</div>
            <div class="item-value copyable" @click="copyToClipboard(orderInfo.remark)">
              {{ accountInfo.remark }}<i class="el-icon-copy"><t-icon name="file-copy"></t-icon></i>
            </div>
          </div>
        </div>
      </template>
    </t-dialog>

    <t-dialog
      v-model:visible="dialogVisiblePay"
      :closeOnOverlayClick="false"
      :footer="false"
      theme="success"
      header=" 选择付款方式"
      :width="isMobilePhone ? '90%' : '600'"
    >
      <template v-slot:default>
        <t-button class="shop-dialog-btn" theme="primary" @click="aliPay">支付宝</t-button>
        <t-button class="shop-dialog-btn" theme="success" @click="wxBuy">微信</t-button>
      </template>
    </t-dialog>

    <t-dialog
      :visible.sync="wxShow"
      :closeOnOverlayClick="false"
      :footer="false"
      :on-close="closePayDialog"
      :width="isMobilePhone ? '90%' : '600'"
    >
      <template #header>
        <h4>请使用微信扫码支付</h4>
      </template>
      <div>
        <img v-lazy="'data:image/Jpeg;base64,' + payImg" alt="" />
      </div>
    </t-dialog>

    <t-dialog
      v-model:visible="dialogVisibleDelete"
      :closeOnOverlayClick="false"
      theme="danger"
      header="警告"
      :onConfirm="deleteOrderInit"
      :width="isMobilePhone ? '90%' : '600'"
    >
      <p>是否确认删除?!</p>
    </t-dialog>

    <t-dialog
      :visible="shopDialog"
      style="text-align: left"
      :on-close="closeUserDialog"
      :closeOnOverlayClick="false"
      :width="isMobilePhone ? '90%' : '600'"
    >
      <template #header>
        <div class="shop-dialog-header">
          <img :src="shopDialogImg" class="pay-img" />
          <div class="shop-header-price">
            <div class="popup-sku__goods-name">{{ shopName }}</div>
            <div class="goods-price-container">
              <span
                >¥<strong style="color: red; font-size: 27px">{{ price }}</strong></span
              >
              <p>库存:{{ stock }}</p>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="shop-dialog-footer">
          <t-button
            class="shop-dialog-btn"
            theme="primary"
            @click="spcesSubmit('ali')"
            v-if="stock > 0"
            >支付宝</t-button
          >
          <t-button
            class="shop-dialog-btn"
            theme="success"
            @click="spcesSubmit('wx')"
            v-if="stock > 0"
            >微信</t-button
          >
          <t-button class="shop-dialog-btn" v-if="stock <= 0" :disabled="true">库存不足</t-button>
        </div>
      </template>
      <h4 style="margin-bottom: 0.25rem" v-show="dialogThirdCardList.length > 0">时长</h4>
      <div class="radio-button-group">
        <t-radio-group
          v-model="accountTime"
          variant="outline"
          size="small"
          @change="handleAccountTime"
          v-show="dialogThirdCardList.length > 0"
          style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between"
          ><t-radio-button
            v-for="(item, index) in dialogThirdCardList"
            :key="item.subjectId"
            :value="item.subjectId"
            style="
              width: 45%;
              box-sizing: border-box;
              padding: 0 8px;
              margin-bottom: 8px;
              border-radius: 3px;
              border: 1px solid;
              border-color: var(--td-border-level-2-color);
              background-color: var(--td-bg-color-component);
              color: var(--td-text-color-secondary);
            "
          >
            {{ item.name }}
          </t-radio-button>
        </t-radio-group>
      </div>
    </t-dialog>
  </div>
</template>

<script setup>
import router from '@/router'
import {
  getTicketOrderDetail,
  deleteTicketOrder,
  getTicketOrderList,
  getTicketSubjects,
  updateOrderCode
} from '@/api/ticket'
import { MessagePlugin } from 'tdesign-vue-next'
import {
  isWeixin,
  isMobile,
  clearStorage,
  copyToClipboard,
  watchIsMobile,
  checkIsMobile,
  getTicketClass
} from '@/utils/util'
import {
  getAlipayPcPayment,
  getAlipayMobilePayment,
  getWeChatPaymentQrCode,
  renewalUpdateOrderCode
} from '@/api/payment'
import { checkWxPayStatusWebSocket, closeWebSocket } from '@/utils/websocket'
import OrderCard from '@/components/OrderCard.vue'
import { onMounted } from 'vue'
const orderAllList = ref([])
const orderUnPayList = ref([])
const orderPaidList = ref([])
const orderDeliveredList = ref([])
const shopDialogImg = ref('')
const shopName = ref('')
const price = ref('')
const stock = ref('')
const dialogThirdCardList = ref([])
const accountTime = ref('')

const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const dialogVisible = ref(false)
const orderInfo = ref({})
const accountInfo = ref({})
const orderCodeValue = ref('')
const dialogVisiblePay = ref(false)
const dialogVisibleDelete = ref(false)
const wxShow = ref(false)
const payImg = ref('')
const deleteCode = ref('')
const remainVisible = ref(false)
const isMobilePhone = ref(checkIsMobile())
const shopDialog = ref(false)
const oldOrderCode = ref('')
const isTwoBuy = ref(false)
const onIsMobileChange = newIsMobile => {
  isMobilePhone.value = newIsMobile
}
onMounted(() => {
  const unwatch = watchIsMobile(onIsMobileChange)
  onBeforeUnmount(unwatch)
})
const onVisibleChange = (val, context = {}) => {
  if (context && context.trigger === 'confirm') {
    MessagePlugin.info('即将跳转到首页...')
    const timer = setTimeout(() => {
      remainVisible.value = false
      clearTimeout(timer)
      router.push({ path: '/' })
    }, 1000)
  } else {
    remainVisible.value = val
  }
}
const closeUserDialog = () => {
  shopDialog.value = false
}
const handlePageSizeChange = newPageSize => {
  pageSize.value = newPageSize
  currentPage.value = 1
  getOrders('all')
}
const handleCurrentChange = newCurrentPage => {
  currentPage.value = newCurrentPage
  getOrders('all')
}
const handlePageSizeChangeAPaid = newPageSize => {
  pageSize.value = newPageSize
  currentPage.value = 1
  getOrders('paid')
}
const handleCurrentChangePaid = newCurrentPage => {
  currentPage.value = newCurrentPage
  getOrders('paid')
}
const handlePageSizeChangeCanceled = newPageSize => {
  pageSize.value = newPageSize
  currentPage.value = 1
  getOrders('canceled')
}
const handleCurrentChangeCanceled = newCurrentPage => {
  currentPage.value = newCurrentPage
  getOrders('canceled')
}
const handlePageSizeChangeRefunded = newPageSize => {
  pageSize.value = newPageSize
  currentPage.value = 1
  getOrders('refunded')
}
const handleCurrentChangeRefunded = newCurrentPage => {
  currentPage.value = newCurrentPage
  getOrders('refunded')
}
//获取订单列表
const getOrders = async tabName => {
  let data = {
    pageNo: currentPage.value,
    pageSize: pageSize.value,
    status: tabName
  }

  await getTicketOrderList(data).then(res => {
    if (res.code == 200) {
      //console.log(res)
      if (tabName == 'all') {
        orderAllList.value = res.data
        total.value = res.total
        //console.log(res.total)
        //console.log(total.value)
        return
      } else if (tabName == 'un_pay') {
        orderUnPayList.value = res.data
        total.value = res.total
        return
      } else if (tabName == 'paid') {
        orderPaidList.value = res.data
        total.value = res.total
        return
      } else if (tabName == 'delivered') {
        orderDeliveredList.value = res.data
        total.value = res.total
        return
      }
    }
  })
}

//获取链接 orderCode 的值,如果有值则跳转到订单详情页
const getOrderCode = () => {
  let orderCode = router.currentRoute.value.query.orderCode
  if (orderCode) {
    showAccountInfo(orderCode)
  }
}
onMounted(() => {
  getOrderCode()
  getOrders('all')
})

//微信支付
const wxBuy = () => {
  if (isWeixin()) {
    wxNativePay('mobile')
  } else {
    wxNativePay('pc')
  }
}

const showAccountInfo = async orderCode => {
  let data = {
    orderCode: orderCode
  }
  await getTicketOrderDetail(data).then(res => {
    //console.log(res)
    if (res.code === 200) {
      orderInfo.value = res.data
      accountInfo.value = res.data.pinAndStoreData
      dialogVisible.value = true
      //console.log(accountInfo.value)
    }
  })
}
const showPay = async orderCode => {
  orderCodeValue.value = orderCode
  dialogVisiblePay.value = true
}
const deleteOrder = orderCode => {
  dialogVisibleDelete.value = true
  deleteCode.value = orderCode
}
const twoBuy = async (classId, parentId, orderCode) => {
  // 执行续费
  // 打开商品选择器
  shopDialog.value = true
  const res = await getTicketSubjects({ classId: classId })
  if (res.code === 200) {
    dialogThirdCardList.value = res.data.thirdLevelData.filter(item => item.parentId === parentId)
    let firstLevelData = []
    let secondLevelData = res.data.secondLevelData.filter(item => item.subjectId === parentId)
    //如果二级类目有值，说明还有 1 级类目
    if (secondLevelData.length > 0) {
      const secondLevelItem = secondLevelData[0]
      firstLevelData = res.data.firstLevelData.filter(
        item => item.subjectId === secondLevelItem.parentId
      )
    } else {
      //二级类目没值说明dialogThirdCardList.value的父级是 1 级类目
      firstLevelData = res.data.firstLevelData.filter(item => item.subjectId === parentId)
    }
    shopDialogImg.value = firstLevelData[0].imgUrl
    const classList = getTicketClass()
    const item = classList.find(item => item.classId === classId)
    shopName.value = item.name
    oldOrderCode.value = orderCode
    getThirdCardList()
  }
}
const getThirdCardList = () => {
  //初始化类目
  if (dialogThirdCardList.value.length > 0) {
    accountTime.value = dialogThirdCardList.value.length
      ? dialogThirdCardList.value[0].subjectId
      : ''
  } else {
    accountTime.value = ''
    shopDialog.value = false
    MessagePlugin.warning('商品失效或已下架')
    return
  }
  dialogThirdCardList.value.sort((a, b) => a.orderNo - b.orderNo)
  if (accountTime.value) {
    handleAccountTime(accountTime.value)
  }
}
const handleAccountTime = value => {
  accountTime.value = value
  //根据 value 值获取对应的数据
  const item = dialogThirdCardList.value.find(item => item.subjectId === value)
  price.value = item.price
  stock.value = item.stock
}

const deleteOrderInit = async () => {
  //console.log(deleteCode.value)
  let data = {
    orderCode: deleteCode.value
  }
  await deleteTicketOrder(data).then(res => {
    if (res.code === 200) {
      MessagePlugin.success('删除成功')
      dialogVisibleDelete.value = false
      localStorage.removeItem('orderAllList')
      getOrders('all')
    }
  })
}

const aliPay = async () => {
  if (isMobile()) {
    // 移动设备走移动支付逻辑
    await getAlipayMobilePayment({ orderCode: orderCodeValue.value }).then(res => {
      if (res.code === 200) {
        //3 秒后跳转支付宝支付
        clearStorage()
        MessagePlugin.success('3 秒后跳转支付宝支付!')
        // 创建定时器
        setTimeout(() => {
          const div = document.createElement('divAliPay')
          div.innerHTML = res.data
          document.body.appendChild(div)
          document.querySelector('form[name=punchout_form]').submit()
        }, 3000)
      }
    })
  } else {
    // PC 设备走 PC 支付逻辑
    await getAlipayPcPayment({ orderCode: orderCodeValue.value }).then(res => {
      if (res.code === 200) {
        //3 秒后跳转支付宝支付
        MessagePlugin.success('3 秒后跳转支付宝支付!')
        clearStorage()
        // 创建定时器
        setTimeout(() => {
          const div = document.createElement('divAliPay')
          div.innerHTML = res.data
          document.body.appendChild(div)
          document.querySelector('form[name=punchout_form]').submit()
        }, 3000)
      }
    })
  }
}

const wxNativePay = async type => {
  if (type === 'pc') {
    // PC 设备走 PC 支付逻辑
    let data = {
      orderCode: orderCodeValue.value,
      type: 'pc'
    }
    if (!isTwoBuy.value) {
      //微信二次支付需要处理原始订单号
      const response = await updateOrderCode({ orderCode: orderCodeValue.value })
      //console.log(response)
      if (response.code === 200) {
        data.orderCode = response.data
        clearStorage()
      } else {
        MessagePlugin.error(response.msg)
        return
      }
    }
    getWeChatPaymentQrCode(data).then(res => {
      if (res.code === 200) {
        payImg.value = res.data.img64
        wxShow.value = true
        checkWxPayStatusWebSocket(data.orderCode).then(res => {
          if (res.statusCode === 200) {
            wxShow.value = false
            dialogVisiblePay.value = false
            shopDialog.value = false
            isTwoBuy.value = false
            MessagePlugin.success('支付成功,请刷新页面查看订单状态')
          }
        })
      }
    })
  } else {
    let data = {
      orderCode: orderCodeValue.value,
      type: 'mobile'
    }
    if (!isTwoBuy.value) {
      //微信二次支付需要处理原始订单号
      const response = await updateOrderCode({ orderCode: orderCodeValue.value })
      if (response.code === 200) {
        data.orderCode = response.data
        clearStorage()
      } else {
        MessagePlugin.error(response.msg)
        return
      }
    }
    getWeChatPaymentQrCode(data).then(res => {
      if (res.code === 200) {
        let url = res.data.url
        window.location.href = url
      }
    })
  }
}
const spcesSubmit = type => {
  //console.log(type)
  // 先创建订单
  renewalUpdateOrderCode({
    orderCode: oldOrderCode.value,
    subjectId: accountTime.value
  }).then(res => {
    if (res.code === 200) {
      //console.log(res)
      isTwoBuy.value = true
      // 创建订单成功后，再去支付
      orderCodeValue.value = res.data
      if (type === 'ali') {
        aliPay()
      }
      if (type === 'wx') {
        wxBuy()
      }
    }
  })
}
const closePayDialog = () => {
  wxShow.value = false
  dialogVisiblePay.value = false
  getOrders('all')
  closeWebSocket()
}
</script>
<style lang="scss">
.radio-button-group {
  .t-is-checked {
    color: var(--td-text-color-primary) !important;
    background-color: var(--td-bg-color-container-select) !important;
    border: 2px solid !important;
    border-color: var(--td-border-level-2-color) !important;
  }
}
</style>
<style lang="scss" scoped>
.my-order {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
  background: var(--white-card-color-1);
  padding-right: 0px;
  padding-left: 0px;
}

.my-order-title {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--text-title-color-1);
}

.tabs {
  background-color: var(--td-bg-color-container);
  padding: 40px;
  border-radius: 10px;
}

.orders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  grid-gap: 20px;
}
@media screen and (max-width: 768px) {
  .orders {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}
.orders :deep(.t-pagination .t-pagination__total) {
  flex: 0.1 !important;
}
.dialog-account-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--td-bg-color-container);
}

.account-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-label {
  flex-basis: 80px;
  font-weight: bold;
}

.item-value {
  flex: 1;
  display: flex;
  align-items: center;
}

.copyable {
  position: relative;
}

.copyable i.el-icon-copy {
  position: absolute;
  right: 0;
  margin-left: 10px;
  color: #999;
  cursor: pointer;
}

.renewal-btn {
  position: absolute;
  right: 0;
  height: 25px;
  width: 40px;
  margin-left: 10px;
  cursor: pointer;
  border: none;
}

.copyable:hover i.el-icon-copy {
  color: #333;
}

.shop-dialog-btn {
  width: 100%;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--transition-easeOut-2);
}
.shop-dialog-btn:nth-child(1) {
  margin-bottom: 1rem;
}
.shop-dialog-btn:nth-child(2) {
  margin-left: 0 !important;
}
@media screen and (max-width: 768px) {
  :deep(.t-dialog) {
    font-size: 12px !important;
    width: 90% !important;
  }
  .dialog-account-info {
    padding: 20px 0 !important;
  }
}
.shop-dialog-header {
  display: flex;
  width: 100%;
}
.pay-img {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  margin-top: -55px;
  margin-right: 15px;
}
.shop-header-price {
  position: relative;
  width: 100%;
  margin-top: -20px;
}
.shop-header-price strong {
  font-weight: 700;
  font-size: 16px;
  color: #ee0a24;
}
.shop-header-price p {
  font-size: 10px;
  color: #999999;
}
.popup-sku__goods-name {
  font-size: 16px;
  line-height: 16px;
  display: flex;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  margin-bottom: 10px;
  text-overflow: ellipsis;
}
.goods-price-container {
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 100%;
}
.shop-dialog-footer {
  text-align: center;
}
.shop-dialog-btn {
  width: 100%;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--transition-easeOut-2);
}
.shop-dialog-btn:nth-child(1) {
  margin-bottom: 1rem;
}
.shop-dialog-btn:nth-child(2) {
  margin-left: 0 !important;
}
.t-dialog__footer {
  padding: 0 !important;
}
.t-dialog__body {
  padding-bottom: 0 !important;
}
</style>
